<template>
  <!--为echarts准备一个具备大小的容器dom-->
  <div id="main" :style="{width: '800px', height: '400px'}"></div>
</template>
<script>
  //import * as echarts from 'echarts';
    export default {
    name: 'other',
  data () {
    return {
      opinion:[],
      opinionData:[]
    }
  },
  mounted(){
    this.myrequest();
  },
  methods: {
    drawLine(){
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById('main'))
        // 绘制图表
        myChart.setOption({
            title: { text: '实验成绩' },
            tooltip: {},
            xAxis: {
                data: this.opinion
            },
            yAxis: {},
            series: [{
                name: '分数',
                type: 'bar',
                data: this.opinionData
            }],
              // type的slider和inside可以同时保留，既可以保留滚动条，也可以在内部拖动
dataZoom : [
        //1.横向使用滚动条
          {
            type: 'slider',//有单独的滑动条，用户在滑动条上进行缩放或漫游。inside是直接可以是在内部拖动显示
            show: true,//是否显示 组件。如果设置为 false，不会显示，但是数据过滤的功能还存在。
            start: 0,//数据窗口范围的起始百分比0-100
            end: 7,//数据窗口范围的结束百分比0-100
            xAxisIndex: [0],// 此处表示控制第一个xAxis，设置 dataZoom-slider 组件控制的 x轴 可是已数组[0,2]表示控制第一，三个；xAxisIndex: 2 ，表示控制第二个。yAxisIndex属性同理
            bottom:-10 //距离底部的距离
          },
      //2.在内部可以横向拖动
         {
             type: 'inside',// 内置于坐标系中
             start: 0,
             end: 30,
             xAxisIndex: [0]
          },
     //3.纵向使用滚动条
        {
            type: 'slider',
            show: true,
            yAxisIndex: [0],//设置组件控制的y轴
            left: '93%',//距离左侧的距离 可以使百分比，也可以是像素 left: '30'（30像素）
            start: 29,
            end: 100
        },
     //4.在内部可以纵向拖动
        {
            type: 'inside',
            yAxisIndex: [0],
            start: 29,
            end: 36
        }
        ]
        });

        
    },
     myrequest(){
       this.$http.post('http://localhost:9527/getTest')
  .then(response => {
    console.log(response);
     console.log(response.data) 
     this.opinionData=response.data
     var list = response.data
     Object.keys(list).forEach(key =>{
       console.log(key,list[key].stuName)
       this.opinion[key]=list[key].stuName
       this.opinionData[key]=list[key].stuScore
     })
    console.log("this.opinionData="+this.opinionData)
    console.log("this.opinionData="+this.opinion)
    this.drawLine();  
  })
  .catch(function (error) {
    console.log(error);
  });
  
    }
  }
}
</script>
<style>
   
</style>